<script lang="ts" setup>
import type { VxeGridProps } from '#/adapter/vxe-table'

import { ref } from 'vue'

import { Page, useVbenModal } from '@vben/common-ui'
import { Plus } from '@vben/icons'
import { $t } from '@vben/locales'

import { Button, Input, message, Popconfirm, Space } from 'ant-design-vue'
import dayjs from 'dayjs'

import { useVbenVxeGrid } from '#/adapter/vxe-table'
import { deleteRole, getRoleList } from '#/api/system/role'

import popupForm from './modules/info.vue'

interface RowType {
  date: string
  id: number
  name: string
  parentId: null | number
  size: number
  type: string
}

const getStatusOptions = () => {
  return [
    {
      color: 'success',
      label: '正常',
      value: '1',
    },
    { color: 'default', label: '停用', value: '0' },
  ]
}

function onRefresh() {
  gridApi.reload()
}

function onDelete(row: any) {
  const hideLoading = message.loading({
    content: $t('ui.actionMessage.deleting', [row.name]),
    duration: 0,
    key: 'delMsg',
  })
  deleteRole({ ids: [row.id] })
    .then(() => {
      message.success({
        content: $t('ui.actionMessage.deleteSuccess', [row.name]),
        key: 'delMsg',
      })
      onRefresh()
    })
    .catch(() => {
      hideLoading()
    })
}

const gridOptions: VxeGridProps<RowType> = {
  cellConfig: {},
  height: 'auto',
  columns: [
    { type: 'checkbox', width: 70 },
    { field: 'name', title: '组别名称', treeNode: true },
    { field: 'rules', title: '权限' },
    // { field: 'status', title: '状态' },
    {
      cellRender: { name: 'CellTag', options: getStatusOptions() },
      field: 'status',
      title: '状态',
    },
    {
      field: 'updatetime',
      title: '更新时间',
      formatter({ cellValue }) {
        return dayjs(cellValue * 1000).format('YYYY-MM-DD')
      },
    },
    {
      field: 'createtime',
      title: '创建时间',
      formatter({ cellValue }) {
        return dayjs(cellValue * 1000).format('YYYY-MM-DD')
      },
    },
    { title: '操作', field: 'action', fixed: 'right', width: 120, slots: { default: 'action' } },
  ],
  proxyConfig: {
    ajax: {
      query: async (_params) => {
        const { list } = await getRoleList({ quick_search: quick_search.value })
        return list
      },
    },
  },
  checkboxConfig: {
    // labelField: 'id',
    highlight: true,
    checkStrictly: true, // ← 加这个
  },
  pagerConfig: {
    enabled: false,
  },
  toolbarConfig: {
    custom: true,
    export: false,
    refresh: true,
    zoom: true,
  },
  treeConfig: {
    parentField: 'pid',
    rowField: 'id',
    expandAll: true,
  },
}

const [Grid, gridApi] = useVbenVxeGrid({ gridOptions })

const isAllExpanded = ref(false)
const toggleExpandAll = () => {
  isAllExpanded.value = !isAllExpanded.value
  gridApi.grid?.setAllTreeExpand(isAllExpanded.value)
}

/**
 *  快速查询查询
 */
const quick_search = ref()
function doSearch() {
  gridApi.query()
}

const [formModal, formModalApi] = useVbenModal({
  connectedComponent: popupForm,
})
// 编辑
function openEdit(res: any, but: any) {
  formModalApi.setData({ rowData: res.id, view: but }).open()
}
</script>

<template>
  <Page auto-content-height>
    <formModal @refresh="gridApi.reload()" />
    <Grid>
      <template #toolbar-actions>
        <Button class="mr-2" type="primary" @click="openEdit('', 'add')">
          <Plus class="size-5" />
          新建
        </Button>

        <Button type="primary" @click="toggleExpandAll">
          {{ isAllExpanded ? '折叠全部' : '展开全部' }}
        </Button>
      </template>
      <template #toolbar-tools>
        <Input v-model:value="quick_search" allow-clear placeholder="通过组名模糊搜索" style="width: 300px; margin-right: 8px" @change="doSearch" />
      </template>
      <template #action="{ row }">
        <Space v-if="row.id !== 1">
          <Button type="primary" size="small" @click="openEdit(row, 'edit')"> 编辑 </Button>
          <Popconfirm title="确定删除选中记录？" ok-text="确认" cancel-text="取消" @confirm="onDelete(row)">
            <Button type="primary" size="small" danger> 删除 </Button>
          </Popconfirm>
        </Space>
      </template>
    </Grid>
  </Page>
</template>

<style scoped>
.custom-expand-btn {
  background-color: #52c41a; /* 绿色 */
  border-color: #52c41a;
  color: white;
}

.custom-expand-btn:hover {
  background-color: #73d13d;
  border-color: #73d13d;
}

.custom-collapse-btn {
  background-color: #faad14; /* 橙色 */
  border-color: #faad14;
  color: white;
}

.custom-collapse-btn:hover {
  background-color: #ffc53d;
  border-color: #ffc53d;
}
</style>
